import styled from 'styled-components';
import { Icon } from 'antd';

import {
  AnalyseLight,
  EmergencyLight
} from './color';

export const SolveC = styled.section`
  position: fixed;
  top: 50% !important;
  left: 50% !important;
  overflow: auto;
  transform: translate(-50% , -50% );
  z-index: 3;
  height: 60vh;
  width: 66vw;
  min-width: 1300px;
  min-height: 550px;
  background: #2f3c4e;
  border-radius: 12px;
  border: 1px solid ${props => props.analyse === "true" ? AnalyseLight : EmergencyLight};
  box-shadow: 0 0 3px ${props => props.analyse === "true" ? AnalyseLight : EmergencyLight};
`
export const SolveHead = styled.h3`
  background: #222b38;
  color: ${props => props.analyse === "true" ? AnalyseLight : EmergencyLight};
  text-align: center;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  border-radius: 10px 10px 0 0;
  margin: 1px;
`
export const SolveContainer = styled.section`
  padding: 24px 50px;
`
export const SolveBrief = styled.section`
  border-bottom: 1px solid #101825;
  padding: 0 0 30px 0;
`
export const SolveBriefCol = styled.section`
  display: inline-block;
  width: ${props => props.width || "100%"};
  margin: ${props => props.margin || "0px"};
  padding: ${props => props.padding || "0px"};
  ul {
    list-style: none;
    padding: 0;
  }
  li {
    color: #fefeff;
    display: inline-block;
    margin-right: 50px;
  }
`
export const SolveDetail = styled.section`
  list-style: none;
  padding: 0;
  margin: 30px 20px;
`
export const SolveDetailCol = styled.section`
  color: #fefeff;
  display: inline-block;
  font-size: 14px;
  color: ${props => props.analyse === "true" ? AnalyseLight : EmergencyLight};
  width: ${props => props.width || "auto"};
  vertical-align: top;
  &::before {
    content: "";
    margin-right: 10px;
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid ${props => props.analyse === "true" ? AnalyseLight : EmergencyLight};
    border-radius: 50%;
    box-shadow: 0 0 0 2px #2f3c4e,0 0 0 3px ${props => props.analyse === "true" ? AnalyseLight : EmergencyLight},0 2px 5px 3px rgba(0,0,0,0);
    background: ${props => props.analyse === "true" ? AnalyseLight : EmergencyLight};
  }
`
export const Line = styled.span`
  display: inline-block;
  width: ${props => props.width || "80px"};
  background: rgba(0, 0, 0, 0);
  height: 1px;
  margin: 0px 10px;
  vertical-align: super;
  border-top: 1px solid ${props => props.analyse === "true" ? AnalyseLight : EmergencyLight};
  background: ${props => props.analyse === "true" ? AnalyseLight : EmergencyLight};
`
export const SolveP = styled.p`
  color: ${props => props.analyse === "true" ? AnalyseLight : EmergencyLight};
  font-size: ${props => props.size || "14px"};
  text-align: ${props => props.align || "left"};
`
export const SolveImg = styled.img`
  display: ${props => props.display || "inline-block"};
  margin: ${props => props.margin || "0px"};
`
export const CloseIcon = styled(Icon)`
  position: absolute;
  top: 10px;
  right: 10px;
  color: #feffff;
  font-size: 20px;
  &:hover {
    cursor: pointer;
  }
`

export const SovleDataUl = styled.ul`
  list-style: none;
`

export const SovleDataLi = styled.li`
  display: inline-block;
  color: #fefeff;
  width: ${props => props.width || "100%"};
  margin: ${props => props.margin || "0px"};
  vertical-align: top;
`
